<template>
  <div class="login-container">
    <div class="login-left">
      <div class="navbar-header">
        <img src="../assets/imgs/company-logo.png" style="width: 80px;" />
        <div>
          <div class="brand-name">湘软科技</div>
          <div class="brand-slogan">Xiangruan Technology</div>
        </div>
      </div>
      <div class="video-wrap">
        <div class="login-slogan">
          <div class="login-slogan-title">湘智造 让智能创造无限可能</div>
          <div class="login-slogan-des">
            专业&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;快捷&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;高效
          </div>
        </div>
        <div class="login-bottom-des">
          <!-- 多实体&nbsp;&nbsp;&nbsp;&nbsp;多机构&nbsp;&nbsp;&nbsp;&nbsp;多组织&nbsp;&nbsp;&nbsp;&nbsp;新制造&nbsp;&nbsp;&nbsp;&nbsp;新商贸&nbsp;&nbsp;&nbsp;&nbsp;新零售&nbsp;&nbsp;&nbsp;&nbsp;新财税&nbsp;&nbsp;&nbsp;&nbsp;TOP低代码 -->
        </div>
        <img
          v-if="isShowImg"
          id="video-placeholder-img"
          src="../assets/imgs/login-bg.jpg"
        />
        <video
          v-else
          id="videoStudio"
          width="100%"
          height="100%"
          autoplay
          loop
          muted
          src="../assets/imgs/company-video.mp4"
          style="display: inline-block"
        ></video>
        <div id="videoBtn" class="video-close" @click="openVideo">
          <i :class="[isShowImg?'el-icon-video-play':'el-icon-close']" style="font-size: 18px; margin-right: 5px;"></i>
          {{ isShowImg ? "打开视频" : "关闭视频" }}
        </div>
      </div>
    </div>
    <div class="login-right">
      <div class="login">
        <div class="login-contianer">
          <div class="login-form">
            <h2 class="login-title">账号登录</h2>
            <!-- <div class="v-tag">商业版</div> -->
            <div class="form-user" @keypress="loginPress">
              <!-- <div class="item">
                <div class="f-text">
                  <label> 用户名： </label>
                </div>
                <div class="f-input">
                  <input
                    type="text"
                    v-focus
                    v-model="userInfo.userName"
                    placeholder="输入用户"
                  />
                </div>
              </div>
              <div class="item">
                <div class="f-text">
                  <label> 密&nbsp;&nbsp;&nbsp;码： </label>
                </div>
                <div class="f-input">
                  <input
                    type="password"
                    v-focus
                    v-model="userInfo.password"
                    placeholder="输入密码"
                  />
                </div>
              </div> -->

              <div class="form-user" @keypress="loginPress">
                <!-- 用户名 -->
                <div class="item">
                  <div class="icon"><i class="el-icon-user"></i></div>
                  <input
                    type="text"
                    v-focus
                    v-model="userInfo.UserName"
                    placeholder="请输入用户名"
                  />
                </div>

                <!-- 密码 -->
                <div class="item">
                  <div class="icon"><i class="el-icon-lock"></i></div>
                  <input
                    type="password"
                    v-focus
                    v-model="userInfo.PassWord"
                    placeholder="请输入密码"
                  />
                </div>
              </div>

              <!-- <div class="item">
                <div class="f-text">
                  <label> 验证码： </label>
                </div>
                <div class="f-input">
                  <input
                    v-focus
                    type="text"
                    v-model="userInfo.verificationCode"
                    placeholder="输入验证码"
                  />
                </div>
                <div class="code" @click="getVierificationCode">
                  <img v-show="codeImgSrc != ''" :src="codeImgSrc" />
                </div>
              </div> -->
            </div>
            <div class="loging-btn">
              <el-button
                size="large"
                :loading="loading"
                type="primary"
                @click="login"
                long
              >
                <span v-if="!loading" class="btn-text">登录</span>
                <span v-else>正在登录...</span>
              </el-button>
            </div>
          </div>
          <!-- <div class="app-link">
            <a
              href="https://wechat.625sc.com:8891/iMES.exe"
              style="text-decoration: none"
              >桌面客户端</a
            >
            <a>
              <i class="el-icon-chat-dot-round"></i> 小程序
              <img src="https://wechat.625sc.com:8891/WXApp.jpg"
            /></a>
            <a>
              <i class="el-icon-mobile-phone"></i>
              Android
              <img src="https://wechat.625sc.com:8891/Android.png"
            /></a>
            <a>
              <i class="el-icon-document"></i>
              H5
              <img src="https://wechat.625sc.com:8891/H5.png"
            /></a>
          </div> -->
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {
  defineComponent,
  ref,
  reactive,
  toRefs,
  getCurrentInstance,
} from "vue";
import { useRouter, useRoute } from "vue-router";
import store from "../store/index";
import http from "@/../src/api/http.js";
export default defineComponent({
  setup(props, context) {
    const loading = ref(false);
    const codeImgSrc = ref("");
    const userInfo = reactive({
      UserName: "",
      PassWord: "",
      // verificationCode: "",
      UUID: undefined,
    });

    const isShowImg = ref(false);

    const openVideo = () => {
      isShowImg.value = !isShowImg.value
    }

    // const getVierificationCode = () => {
    //   http.get("/api/User/getVierificationCode").then((x) => {
    //     codeImgSrc.value = "data:image/png;base64," + x.img;
    //     userInfo.UUID = x.uuid;
    //   });
    // };
    // getVierificationCode();

    let appContext = getCurrentInstance().appContext;
    let $message = appContext.config.globalProperties.$message;
    let router = useRouter();

    const login = () => {
      if (!userInfo.UserName) return $message.error("请输入用户名");
      if (!userInfo.PassWord) return $message.error("请输入密码");
      // if (!userInfo.verificationCode) {
      //   return $message.error("请输入验证码");
      // }
      loading.value = true;
      //http.post("/api/user/login", userInfo, "正在登录....").then((result) => {
      console.log("111");
      http.post("/api/user2/login", userInfo, "正在登录....").then((result) => {
        if (!result.status) {
          console.log(JSON.stringify(result, null, 2));
          loading.value = false;
          // getVierificationCode();
          return $message.error(result.message);
        }
        $message.success("登录成功,正在跳转!");
        console.log("打印语句" + JSON.stringify(result.data, null, 2));
        store.commit("setUserInfo", result.data);
        router.push({ path: "/" });
        console.log("跳转已执行！");
      });

      // $message.success("登录成功,正在跳转!");
      // router.push({ path: "/" });
    };
    const loginPress = (e) => {
      if (e.keyCode == 13) {
        login();
      }
    };
    const openUrl = (url) => {
      window.open(url, "_blank");
    };
    return {
      loading,
      codeImgSrc,
      // getVierificationCode,
      login,
      userInfo,
      loginPress,
      openUrl,
      isShowImg,
      openVideo
    };
  },
  directives: {
    focus: {
      inserted: function (el) {
        el.focus();
      },
    },
  },
});
</script>

<style lang="less" scoped>
.login-container {
  position: relative;
  height: 100%;
  display: flex;
  flex: 1;
  // background: url(~@/assets/imgs/bg_logo.png) no-repeat center center;
  // background-size: cover;
  overflow: hidden;
}
.login-left {
  position: relative;
  width: 100%;
  flex: none;
  height: 100%;
  .navbar-header {
    // height: 70px;
    // padding: 0px 0px 16px 20px;
    display: flex;
    position: absolute;
    align-items: center;
    top: 0;
    left: 0;
    // height: 70px;
    width: 100%;
    margin: 0;
    padding: 10px 0 0 10px;
    z-index: 1;
    .brand-name {
      color: #fff;
      font-size: 24px;
      font-weight: 500;
      font-style: italic;
      // padding: 10px 0 5px 20px;
      margin-bottom: 5px;
      text-shadow: 0 12px 15px rgba(0, 0, 0, 0.37);
    }
    .brand-slogan {
      color: #fff;
      font-size: 16px;
      font-style: italic;
      // padding-left: 20px;
      text-shadow: 0 12px 15px rgba(0, 0, 0, 0.37);
    }
  }
  .video-wrap {
    height: 100%;
    position: relative;
    .login-slogan {
      text-align: center;
      position: absolute;
      width: calc(100vw - 560px);
      top: 30%;
      left: 0;
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      text-shadow: 0 12px 15px rgba(0, 0, 0, 0.37);
      font-family: AlibabaPuHuiTi-Medium, AlibabaPuHuiTi;
      color: #fff;
      white-space: nowrap;
      animation: fontAnimation 1s;
      .login-slogan-title {
        font-size: 55px;
        font-weight: 500;
        width: 100%;
      }
    }
    .login-bottom-des {
      position: absolute;
      width: calc(100vw - 560px);
      color: #fff;
      text-shadow: 0 6px 15px rgba(0, 0, 0, 0.8);
      text-align: center;
      font-size: 16px;
      opacity: 0.8;
      margin: 0 auto;
      bottom: 30px;
    }
    .video-placeholder-img {
      width: 100%;
      height: 100%;
    }
    .login-slogan-des {
      font-size: 34px;
      font-weight: 400;
      line-height: 3.2rem;
      margin-top: 20px;
      width: 100%;
    }
    #video-placeholder-img {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      width: 100%;
      height: 100%;
      z-index: -1;
    }
    .video-wrap video {
      // object-fit: none;
      pointer-events: none;
    }
    video {
      display: inline-block;
      object-fit: fill !important;
      // vertical-align: baseline;
    }
    .video-close,
    .video-play {
      border: 2px solid rgba(255, 255, 255, 0.6);
      background-color: rgba(0, 0, 0, 0.6);
      border-radius: 24px;
      width: 120px;
      height: 40px;
      color: #fff;
      position: absolute;
      right: 30px;
      bottom: 70px;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }
}
.login-right {
  width: 400px;
  min-width: 400px;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: 150px;
  background-color: #fff;
  border-radius: 16px;
  display: flex;
  flex-direction: column;
  width: 400px;
  // padding: 15px 30px;
  height: 368px;
}
.login {
  .app-link {
    text-align: center;
    padding-top: 31px;
    font-size: 14px;
    border-top: 1px solid #efefe1;

    a {
      position: relative;
      cursor: pointer;
      width: 70px;
      margin: 20px 20px 0 0;
      font-size: 13px;
      font-family: "Microsoft Yahei";
      color: #727171;
    }

    img {
      display: none;
    }

    a:hover {
      color: #1483f6;
      img {
        display: block;
        position: absolute;
        z-index: 999999999;
        top: -130px;
        width: 120px;
        left: -22px;
        border: 1px solid #b1b1b1;
      }
    }
  }
}

.login {
  flex: 1;
}

.loging-btn {
  margin-top: 10px;

  button {
    width: 100%;
    height: 44px;
    font-size: 16px;
    font-weight: 500;
    border: none;
    border-radius: 24px;
    transition: all 0.3s ease;
    box-shadow: 0 4px 12px rgba(64, 158, 255, 0.2);
    background-image: linear-gradient(135deg, #409eff, #66b1ff);
    color: white;
    letter-spacing: 1px;

    &:hover {
      background-image: linear-gradient(135deg, #66b1ff, #409eff);
      box-shadow: 0 6px 16px rgba(64, 158, 255, 0.35);
      transform: translateY(-2px);
    }

    &:active {
      transform: scale(0.98);
      box-shadow: 0 3px 6px rgba(64, 158, 255, 0.25);
    }

    &:disabled {
      background-color: #c0c4cc !important;
      cursor: not-allowed;
      box-shadow: none;
    }
  }

  .btn-text {
    font-size: 16px;
    font-weight: 600;
    // letter-spacing: 1px;
  }
}
.login-contianer {
  height: 100%;
  display: flex;
  align-items: center;
  background: linear-gradient(145deg, #ffffff, #f2f2f2);
  border-radius: 20px; // 圆角优化
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.15); // 更柔和的阴影
  transition: all 0.3s ease;
}
// 新增样式
.login-form {
  padding: 30px 40px;
  width: 100%;

  h2 {
    font-weight: 500;
    padding: 0 0 10px 0px;
    text-align: left;
    // margin-top: 15px;
  }

  .v-tag {
    top: -23px;
    text-align: center;
    position: absolute;
    right: -43px;
    line-height: 49px;
    top: -17px;
    padding-left: 21px;
    font-size: 12px;
    width: 158px;
    background: #3a8ee6;
    padding-top: 25px;
    color: white;
    -webkit-transform: rotate(40deg);
    letter-spacing: 2px;
  }

  // 新增样式
  // &:hover {
  //   box-shadow: 0 20px 45px rgba(0, 0, 0, 0.2);
  //   transform: translateY(-2px);
  // }
}
.login-title {
  font-size: 30px;
  color: #409eff;
}
.form-user {
  margin: 25px 0;

  .item {
    display: flex;
    align-items: center;
    background: #f8f8f8;
    border-radius: 10px;
    padding: 10px 14px;
    margin-bottom: 25px; // 输入框之间的垂直间距
    border: 1px solid #ddd;
    transition: all 0.3s ease;

    &:hover {
      border-color: #409eff;
      box-shadow: 0 0 4px rgba(64, 158, 255, 0.3);
    }

    .icon {
      color: #999;
      font-size: 18px;
      margin-right: 10px;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    input {
      flex: 1;
      border: none;
      outline: none;
      background: transparent;
      font-size: 16px;
      color: #333;

      &::placeholder {
        color: #bbb;
      }
    }
  }
}

input:-webkit-autofill {
  box-shadow: 0 0 0px 1000px #f8f8f8 inset;
}
@media screen and (max-width: 600px) {
  .desc {
    display: none;
  }

  .bg {
    background-image: none;
  }

  .login-form {
    box-shadow: none !important;
  }

  .login-form {
    width: 100% !important;
  }

  .login-footer,
  .r-bg,
  .l-bg {
    display: none;
  }

  .l-left {
    display: none;
  }

  .c-bg-item {
    background: none !important;
  }
}
</style>
